/* ============================================================
   Brisa Energy — hoja de estilo única
   Paleta: verde Brisa, ámbar solar, cobre térmico, celeste
   ============================================================ */

:root {
  --verde: #7ED957;
  --verde-claro: #96e56f;
  --ambar: #F2A93B;
  --cobre: #D2703A;
  --celeste: #3FA4A9;
  --fondo: #0e120c;
  --fondo-2: #0b0f09;
  --tinta: #14200f;
  --claro: #f5f8f4;
  --titulo: 'Poppins', sans-serif;
  --texto: 'Open Sans', sans-serif;
  --wrap: 1400px;
  --pad: 48px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fondo);
  color: #fff;
  font-family: var(--texto);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--verde); text-decoration: none; }
a:hover { color: #a3e87f; }
:focus-visible { outline: 2px solid var(--ambar); outline-offset: 3px; border-radius: 4px; }
::selection { background: rgba(126, 217, 87, 0.3); }
img { max-width: 100%; }

h1, h2, h3 { font-family: var(--titulo); margin: 0; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.seccion { padding: 110px 0; }
.seccion-sup { padding-top: 90px; }
.hilo-sup { border-top: 1px solid rgba(255, 255, 255, 0.12); }

/* ---------- Tipografía de bloques ---------- */
.kicker {
  font-family: var(--titulo);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.kicker.verde { color: var(--verde); }
.kicker.ambar { color: var(--ambar); }
.kicker.cobre { color: var(--cobre); }
.kicker.celeste { color: var(--celeste); }

.titulo-xl {
  font-weight: 800;
  font-size: clamp(44px, 6.2vw, 100px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.titulo-l {
  font-weight: 800;
  font-size: clamp(34px, 4vw, 66px);
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.titulo-m {
  font-weight: 800;
  font-size: clamp(32px, 3.4vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.025em;
}
.titulo-s {
  font-weight: 800;
  font-size: clamp(30px, 3.1vw, 48px);
  line-height: 1.06;
  letter-spacing: -0.025em;
}
.lede {
  font-size: clamp(17px, 1.35vw, 22px);
  line-height: 1.58;
  color: rgba(255, 255, 255, 0.68);
}
.parrafo { font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, 0.62); }
.numeral {
  font-family: var(--titulo);
  font-weight: 800;
  font-size: clamp(60px, 8vw, 140px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- Barra de navegación ---------- */
.progreso { height: 3px; background: rgba(255, 255, 255, 0.08); }
.progreso > span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--verde), var(--ambar), var(--cobre));
}
.tope { position: fixed; top: 0; left: 0; right: 0; z-index: 80; }
.barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 16px var(--pad);
  backdrop-filter: blur(14px);
  background: rgba(14, 18, 12, 0.72);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  transition: background 0.4s ease, padding 0.4s ease;
}
.barra.compacta { background: rgba(11, 15, 9, 0.94); padding: 11px var(--pad); }
.espaciador { height: 77px; }

.marca { display: flex; align-items: center; gap: 14px; color: #fff; }
.marca:hover { color: #fff; }
.marca-txt { display: flex; flex-direction: column; line-height: 1; }
.marca-txt b { font-family: var(--titulo); font-weight: 800; font-size: 18px; letter-spacing: 0.02em; }
.marca-txt span {
  font-family: var(--titulo);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.36em;
  color: var(--ambar);
  margin-top: 3px;
}

.menu { display: flex; align-items: center; gap: 30px; }
.menu a {
  font-family: var(--titulo);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.62);
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.menu a:hover { color: #fff; }
.menu a.activo { color: var(--verde); border-bottom-color: var(--verde); }

.volver {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 26px var(--pad) 0;
  font-family: var(--titulo);
  font-weight: 500;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
}
.volver:hover { color: #fff; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--titulo);
  font-weight: 700;
  font-size: 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 17px 34px;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease,
    border-color 0.25s ease, color 0.25s ease;
}
.btn-verde { background: var(--verde); color: var(--tinta); }
.btn-verde:hover {
  background: var(--verde-claro);
  color: var(--tinta);
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(126, 217, 87, 0.28);
}
.btn-linea { color: #fff; border-color: rgba(255, 255, 255, 0.28); font-weight: 600; }
.btn-linea:hover {
  color: #fff;
  border-color: #fff;
  background: rgba(255, 255, 255, 0.07);
  transform: translateY(-3px);
}
.btn-ambar {
  color: var(--ambar);
  border-color: rgba(242, 169, 59, 0.6);
  font-weight: 600;
  font-size: 14px;
  padding: 11px 22px;
  letter-spacing: 0.04em;
}
.btn-ambar:hover { background: var(--ambar); color: var(--tinta); transform: translateY(-2px); }
.btn-tinta { background: var(--tinta); color: #F2F7EF; font-size: 17px; padding: 19px 38px; }
.btn-tinta:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 16px 36px rgba(20, 32, 15, 0.28); }
.btn-tinta-linea {
  color: var(--tinta);
  border-color: rgba(20, 32, 15, 0.4);
  font-size: 17px;
  padding: 19px 38px;
}
.btn-tinta-linea:hover { color: var(--tinta); background: rgba(20, 32, 15, 0.08); transform: translateY(-3px); }

.acciones { display: flex; flex-wrap: wrap; gap: 16px; }

/* ---------- Portada ---------- */
.portada {
  position: relative;
  min-height: calc(100vh - 77px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 120px var(--pad) 40px;
  overflow: hidden;
}
.portada-img {
  position: absolute;
  top: -8%;
  left: 0;
  width: 100%;
  height: 116%;
  object-fit: cover;
  will-change: transform;
}
.velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(10, 14, 9, 0.97) 0%, rgba(12, 17, 10, 0.9) 42%, rgba(18, 28, 14, 0.45) 100%);
}
.velo-lateral {
  position: absolute;
  inset: 0;
  background: linear-gradient(95deg, rgba(10, 14, 9, 0.96) 0%, rgba(10, 14, 9, 0.86) 48%, rgba(10, 14, 9, 0.4) 100%);
}
.resplandor {
  position: absolute;
  top: 6%;
  right: -6%;
  width: 44vw;
  height: 44vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 169, 59, 0.26) 0%, rgba(242, 169, 59, 0) 68%);
  animation: brillo 14s ease-in-out infinite;
  pointer-events: none;
}
.portada-cuerpo { position: relative; max-width: 1180px; }
.insignia {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(126, 217, 87, 0.4);
  border-radius: 999px;
  padding: 9px 20px;
  margin-bottom: 30px;
  font-family: var(--titulo);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--verde);
}
.insignia i { width: 7px; height: 7px; border-radius: 50%; background: var(--verde); }
.acento { color: var(--ambar); }

.cifras {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.12);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.cifra { background: rgba(14, 18, 12, 0.55); padding: 24px 4px 6px; }
.cifra b {
  display: block;
  font-family: var(--titulo);
  font-weight: 800;
  font-size: clamp(28px, 3vw, 44px);
  font-variant-numeric: tabular-nums;
}
.cifra span {
  display: block;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 6px;
}
.senal {
  position: absolute;
  left: 50%;
  bottom: 14px;
  width: 1px;
  height: 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--ambar));
  animation: cue 2.2s ease-in-out infinite;
}

/* Encabezado de página interna con imagen */
.cabecera { position: relative; padding: 130px var(--pad); overflow: hidden; }
.cabecera-img {
  position: absolute;
  top: -10%;
  left: 0;
  width: 100%;
  height: 120%;
  object-fit: cover;
  will-change: transform;
}
.cabecera-cuerpo { position: relative; max-width: var(--wrap); margin: 0 auto; }
.numeral.ambar { color: rgba(242, 169, 59, 0.4); }
.numeral.cobre { color: rgba(210, 112, 58, 0.42); }
.numeral.verde { color: rgba(126, 217, 87, 0.28); }
.numeral.celeste { color: rgba(63, 164, 169, 0.3); }

/* ---------- Marquesina ---------- */
.cinta {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  padding: 22px 0;
  overflow: hidden;
  background: var(--fondo-2);
}
.cinta-pista { display: flex; width: max-content; animation: desliza 38s linear infinite; }
.cinta-grupo {
  display: flex;
  align-items: center;
  gap: 46px;
  padding-right: 46px;
  font-family: var(--titulo);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.34);
}
.cinta-grupo em { color: var(--ambar); font-style: normal; }

/* ---------- Rejillas y tarjetas ---------- */
.rej-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.rej-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.rej-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.dos-columnas { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 80px; align-items: start; }

.tarjeta {
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 22px;
  padding: 34px 30px;
  background: rgba(255, 255, 255, 0.03);
  transition: transform 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}
.tarjeta:hover { transform: translateY(-8px); background: rgba(255, 255, 255, 0.06); }
.tarjeta h3 { font-weight: 700; font-size: 22px; margin-bottom: 12px; }
.tarjeta.cobre:hover { border-color: rgba(210, 112, 58, 0.7); background: rgba(210, 112, 58, 0.07); }
.tarjeta.viva { border-color: rgba(210, 112, 58, 0.7); background: rgba(210, 112, 58, 0.1); }
.tarjeta .paso {
  font-family: var(--titulo);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--cobre);
  margin-bottom: 16px;
}
.tarjeta .cifra-grande {
  font-family: var(--titulo);
  font-weight: 800;
  font-size: 40px;
  line-height: 1;
  margin: 0 0 20px;
  font-variant-numeric: tabular-nums;
}
.tarjeta .pie {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 20px;
  margin-top: 26px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.5);
}
.tarjeta .pie strong { font-family: var(--titulo); color: #fff; }

.tarjeta-foto {
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 22px;
  overflow: hidden;
  transition: transform 0.4s ease, border-color 0.4s ease;
}
.tarjeta-foto:hover { transform: translateY(-8px); border-color: rgba(126, 217, 87, 0.6); }
.tarjeta-foto.solar:hover { border-color: rgba(242, 169, 59, 0.6); }
.tarjeta-foto figure { margin: 0; height: 280px; overflow: hidden; background: #1a1f1c; }
.tarjeta-foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.8s ease; }
.tarjeta-foto:hover img { transform: scale(1.07); }
.tarjeta-foto .cuerpo { padding: 32px 34px 36px; }
.tarjeta-foto .etiqueta {
  font-family: var(--titulo);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--verde);
  margin-bottom: 14px;
}
.tarjeta-foto h3 { font-weight: 800; font-size: 27px; margin-bottom: 12px; }

.problema {
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 20px;
  padding: 34px 36px;
  background: rgba(255, 255, 255, 0.03);
  transition: transform 0.35s ease, border-color 0.35s ease, background 0.35s ease;
}
.problema:hover { transform: translateX(10px); }
.problema h3 { font-weight: 700; font-size: 24px; margin-bottom: 12px; }
.problema p { font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, 0.68); margin: 0; }
.problema.ambar h3 { color: var(--ambar); }
.problema.ambar:hover { border-color: rgba(242, 169, 59, 0.55); background: rgba(242, 169, 59, 0.06); }
.problema.cobre h3 { color: var(--cobre); }
.problema.cobre:hover { border-color: rgba(210, 112, 58, 0.6); background: rgba(210, 112, 58, 0.07); }
.problema.verde h3 { color: var(--verde); }
.problema.verde:hover { border-color: rgba(126, 217, 87, 0.55); background: rgba(126, 217, 87, 0.06); }

/* ---------- Índice de líneas ---------- */
.indice { display: grid; grid-template-columns: 0.62fr 1.38fr; gap: 70px; align-items: start; }
.indice-fijo { position: sticky; top: 130px; }
.contador { display: flex; align-items: baseline; gap: 10px; font-family: var(--titulo); font-variant-numeric: tabular-nums; }
.contador b { font-weight: 800; font-size: 62px; line-height: 1; color: var(--ambar); }
.contador span { font-weight: 500; font-size: 20px; color: rgba(255, 255, 255, 0.4); }

.linea {
  display: block;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 40px 8px;
  color: #fff;
  transition: padding 0.35s ease, background 0.35s ease;
}
.linea:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.linea:hover, .linea.activa { background: rgba(255, 255, 255, 0.05); color: #fff; }
.linea.activa { padding-left: 26px; }
.linea .fila { display: flex; align-items: baseline; gap: 22px; margin-bottom: 14px; }
.linea .num { font-family: var(--titulo); font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.linea .nom {
  font-family: var(--titulo);
  font-weight: 800;
  font-size: clamp(26px, 2.6vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.linea p { font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, 0.6); max-width: 640px; padding-left: 37px; margin: 0; }

/* ---------- Proceso y beneficios ---------- */
.paso-bloque { border-top: 1px solid rgba(255, 255, 255, 0.15); padding-top: 26px; }
.paso-bloque .num { font-family: var(--titulo); font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; margin-bottom: 14px; }
.paso-bloque h3 { font-weight: 700; font-size: 22px; margin-bottom: 12px; }
.paso-bloque p { font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.62); margin: 0; }

.beneficios { border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 34px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.beneficios h3 { font-weight: 700; font-size: 19px; color: var(--ambar); margin-bottom: 8px; }
.beneficios p { font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, 0.6); margin: 0; }

.diferencial { border-top: 3px solid var(--verde); padding-top: 26px; }
.diferencial.ambar { border-top-color: var(--ambar); }
.diferencial h3 { font-weight: 800; font-size: 24px; line-height: 1.2; margin-bottom: 12px; }
.diferencial p { font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, 0.62); margin: 0; }

/* ---------- Mosaico de textos ---------- */
.mosaico {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  overflow: hidden;
}
.mosaico > div { background: var(--fondo); padding: 46px 44px; transition: background 0.35s ease; }
.mosaico > div:hover { background: rgba(255, 255, 255, 0.04); }
.mosaico h3 { font-weight: 800; font-size: 26px; margin-bottom: 14px; }
.mosaico p { font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, 0.62); margin: 0; }

/* ---------- Reparto del contrato ---------- */
.reparto { border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 22px; padding: 44px 42px; }
.reparto.destacado { border-color: rgba(126, 217, 87, 0.5); background: rgba(126, 217, 87, 0.07); }
.reparto .etiqueta {
  font-family: var(--titulo);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--verde);
  margin-bottom: 26px;
}
.reparto ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.reparto li { font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, 0.78); }

/* ---------- Pestañas de financiamiento ---------- */
.pestanas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.pestana {
  font-family: var(--titulo);
  font-weight: 600;
  font-size: 16px;
  padding: 14px 26px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  transition: all 0.25s ease;
}
.pestana:hover { border-color: rgba(255, 255, 255, 0.45); color: #fff; }
.pestana[aria-selected="true"] { color: var(--tinta); }
.pestana[data-color="ambar"][aria-selected="true"] { background: var(--ambar); border-color: var(--ambar); }
.pestana[data-color="verde"][aria-selected="true"] { background: var(--verde); border-color: var(--verde); }
.pestana[data-color="celeste"][aria-selected="true"] { background: var(--celeste); border-color: var(--celeste); }

.panel-fin {
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 24px;
  padding: 46px 48px;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  background: rgba(255, 255, 255, 0.03);
}
.panel-fin h3 { font-weight: 800; font-size: 30px; line-height: 1.15; margin-bottom: 16px; }
.panel-fin p { font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, 0.68); margin: 0; }
.ficha { display: flex; flex-direction: column; }
.ficha div {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.ficha div:last-child { border-bottom: 0; }
.ficha dt, .ficha .clave {
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.ficha .valor { font-family: var(--titulo); font-weight: 700; font-size: 18px; text-align: right; }

/* ---------- Calculadora ---------- */
.calculadora { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: stretch; }
.controles {
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 24px;
  padding: 44px 46px;
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.control-cab { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }
.control-cab label { font-family: var(--titulo); font-weight: 600; font-size: 17px; }
.control-cab output {
  font-family: var(--titulo);
  font-weight: 800;
  font-size: 22px;
  color: var(--ambar);
  font-variant-numeric: tabular-nums;
}
input[type="range"] { -webkit-appearance: none; appearance: none; background: transparent; width: 100%; height: 22px; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: rgba(255, 255, 255, 0.18); border-radius: 4px; }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -9px;
  border-radius: 50%;
  background: var(--ambar);
  border: 3px solid var(--fondo);
  box-shadow: 0 0 0 1px var(--ambar);
  cursor: grab;
}
input[type="range"]::-moz-range-track { height: 4px; background: rgba(255, 255, 255, 0.18); border-radius: 4px; }
input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ambar);
  border: 3px solid var(--fondo);
  cursor: grab;
}
.opciones { display: flex; gap: 10px; }
.nota { font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, 0.45); margin-top: 16px; }

.resultado {
  background: linear-gradient(150deg, rgba(126, 217, 87, 0.12), rgba(242, 169, 59, 0.08));
  border: 1px solid rgba(126, 217, 87, 0.35);
  border-radius: 24px;
  padding: 44px 46px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px;
}
.resultado .etiqueta {
  font-family: var(--titulo);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 14px;
}
.resultado .grande {
  font-family: var(--titulo);
  font-weight: 800;
  font-size: clamp(38px, 4.2vw, 60px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--verde);
  font-variant-numeric: tabular-nums;
}
.resultado .mensual { font-size: 17px; color: rgba(255, 255, 255, 0.6); margin-top: 12px; }
.mini { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255, 255, 255, 0.14); }
.mini > div { background: var(--fondo); padding: 22px 18px 6px; }
.mini b { display: block; font-family: var(--titulo); font-weight: 800; font-size: 26px; font-variant-numeric: tabular-nums; }
.mini b.ambar { color: var(--ambar); }
.mini b.celeste { color: var(--celeste); }
.mini span {
  display: block;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 6px;
}

/* ---------- Bloque de contacto ---------- */
.contacto-bloque {
  border: 1px solid rgba(126, 217, 87, 0.35);
  background: linear-gradient(150deg, rgba(126, 217, 87, 0.1), rgba(242, 169, 59, 0.06));
  border-radius: 24px;
  padding: 56px 52px;
  display: grid;
  grid-template-columns: 1.15fr auto;
  gap: 60px;
  align-items: center;
}
.contacto-bloque ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 16px; color: rgba(255, 255, 255, 0.55); }
.contacto-acciones { display: flex; flex-direction: column; gap: 14px; }
.telefono { font-family: var(--titulo); font-weight: 700; font-size: 15px; text-align: center; color: rgba(255, 255, 255, 0.5); }

/* ---------- Preguntas frecuentes ---------- */
.faq { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: 70px; align-items: start; }
.faq-fijo { position: sticky; top: 130px; }
.faq-lista { display: flex; flex-direction: column; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.faq-item { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  width: 100%;
  padding: 28px 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: #fff;
  font-family: var(--titulo);
  font-weight: 700;
  font-size: clamp(18px, 1.5vw, 23px);
  line-height: 1.35;
  text-align: left;
  transition: color 0.25s ease;
}
.faq-q i {
  font-family: var(--titulo);
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  font-style: normal;
  flex: none;
  color: var(--ambar);
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), color 0.25s ease;
}
.faq-q[aria-expanded="true"] { color: var(--verde); }
.faq-q[aria-expanded="true"] i { color: var(--verde); transform: rotate(45deg); }
.faq-a {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s ease;
}
.faq-a.abierta { max-height: 600px; opacity: 1; }
.faq-a p { font-size: 17px; line-height: 1.65; color: rgba(255, 255, 255, 0.66); padding: 0 60px 30px 0; margin: 0; }

/* ---------- Sectores (fondo claro) ---------- */
.claro-bloque { background: var(--claro); color: #2c2c2c; padding: 110px 0; }
.claro-bloque .kicker.celeste { color: var(--celeste); }
.claro-bloque .lede { color: #5c625b; }
.sectores { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.sector {
  background: #fff;
  border: 1px solid #e4e9e2;
  border-radius: 18px;
  padding: 30px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.sector:hover { transform: translateY(-6px); border-color: var(--celeste); box-shadow: 0 16px 34px rgba(20, 32, 15, 0.1); }
.sector span { font-family: var(--titulo); font-weight: 600; font-size: 16px; }

/* ---------- Cierre y pie ---------- */
.cierre { background: linear-gradient(120deg, var(--ambar) 0%, var(--verde) 100%); color: var(--tinta); padding: 110px 0; }
.cierre h2 { font-weight: 800; font-size: clamp(34px, 4.4vw, 68px); line-height: 1.04; letter-spacing: -0.03em; margin-bottom: 24px; max-width: 1000px; }
.cierre p { font-size: clamp(17px, 1.35vw, 23px); line-height: 1.55; max-width: 720px; color: rgba(20, 32, 15, 0.75); }
.cierre-marca { display: flex; align-items: center; gap: 18px; margin-bottom: 44px; }
.cierre-marca div { display: flex; flex-direction: column; line-height: 1; }
.cierre-marca b { font-family: var(--titulo); font-weight: 800; font-size: 24px; }
.cierre-marca span { font-family: var(--titulo); font-weight: 500; font-size: 15px; letter-spacing: 0.4em; margin-top: 4px; }
.datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; border-top: 1px solid rgba(20, 32, 15, 0.22); padding-top: 34px; }
.datos .etiqueta {
  font-family: var(--titulo);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(20, 32, 15, 0.55);
  margin-bottom: 10px;
}
.datos .valor { font-family: var(--titulo); font-weight: 700; font-size: 24px; }
.cierre-compacto { padding: 90px 0; }
.cierre-compacto .fila { display: grid; grid-template-columns: 1fr auto; gap: 60px; align-items: center; }
.cierre-compacto h2 { font-size: clamp(30px, 3.4vw, 52px); margin-bottom: 18px; }
.cierre-compacto p { font-size: 18px; max-width: 640px; color: rgba(20, 32, 15, 0.78); margin: 0; }

.paginador {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 70px;
  padding-top: 30px;
  font-family: var(--titulo);
  font-weight: 600;
  font-size: 15px;
}

.pie { background: var(--fondo-2); border-top: 1px solid rgba(255, 255, 255, 0.07); margin-top: 40px; }
.pie-rejilla { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; padding: 60px 0; }
.pie-marca { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.pie-marca div { display: flex; flex-direction: column; line-height: 1; }
.pie-marca b { font-family: var(--titulo); font-weight: 800; font-size: 17px; }
.pie-marca span { font-family: var(--titulo); font-weight: 500; font-size: 10px; letter-spacing: 0.34em; color: var(--ambar); margin-top: 3px; }
.pie p { font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.5); max-width: 34ch; margin: 0; }
.pie h4 {
  font-family: var(--titulo);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ambar);
  margin: 0 0 18px;
}
.pie-enlaces { display: flex; flex-direction: column; gap: 11px; font-size: 15px; }
.pie-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  padding: 0 0 44px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.38);
}

/* ---------- Flotantes ---------- */
.wpp {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 70;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--verde);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 30px rgba(126, 217, 87, 0.35);
  transition: transform 0.25s ease;
}
.wpp:hover { transform: scale(1.08); }
.arriba {
  position: fixed;
  right: 26px;
  bottom: 96px;
  z-index: 70;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(14, 18, 12, 0.85);
  backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.arriba.visible { opacity: 1; pointer-events: auto; }
.arriba:hover { transform: translateY(-3px); }

/* ---------- Apariciones al hacer scroll ---------- */
[data-reveal] {
  opacity: 0;
  transition: opacity 0.85s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.85s cubic-bezier(0.2, 0.7, 0.2, 1);
}
[data-reveal="up"] { transform: translateY(34px); }
[data-reveal="left"] { transform: translateX(-34px); }
[data-reveal="right"] { transform: translateX(34px); }
[data-reveal="zoom"] { transform: scale(0.94); }
[data-reveal].visto { opacity: 1; transform: none; }

@keyframes desliza { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes brillo {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
  50% { transform: translate(4%, -3%) scale(1.15); opacity: 0.8; }
}
@keyframes cue {
  0% { transform: translateY(0); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: translateY(16px); opacity: 0; }
}

/* ---------- Adaptable ---------- */
@media (max-width: 1100px) {
  :root { --pad: 28px; }
  .menu { gap: 18px; }
  .dos-columnas, .indice, .faq { grid-template-columns: 1fr; gap: 40px; }
  .indice-fijo, .faq-fijo { position: static; }
  .rej-3, .rej-4, .beneficios, .calculadora, .panel-fin, .contacto-bloque, .cierre-compacto .fila { grid-template-columns: 1fr; }
  .sectores { grid-template-columns: repeat(3, 1fr); }
  .cifras, .datos, .pie-rejilla { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .barra { flex-wrap: wrap; gap: 14px; }
  .menu { width: 100%; overflow-x: auto; }
  .espaciador { height: 130px; }
  .rej-2, .mosaico, .sectores, .cifras, .datos, .pie-rejilla { grid-template-columns: 1fr; }
  .paginador { flex-direction: column; }
  .faq-a p { padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; }
}